<template>
  <div class="card content-box">
    <span class="text">栏目管理</span>
    <el-button type="success" @click="show_add = true" style="margin-left: -90%">添加栏目</el-button>
    <!--展示栏目列表-->
    <el-table :data="colList" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="栏目编号" prop="categoryId"></el-table-column>
      <el-table-column label="名称" prop="categoryName"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="show(row)" :icon="Search" circle></el-button>
          <el-button type="danger" @click="del(row.categoryId)" :icon="Delete" circle />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
  </div>

  <!-- 添加栏目弹窗 -->
  <el-dialog v-model="show_add" width="40%">
    <el-form :model="form" label-width="130px" style="padding-right: 30px">
      <el-form-item label="栏目名称">
        <el-input v-model="form.categoryName"></el-input>
      </el-form-item>
      <el-form-item label="栏目描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_add = false">取消</el-button>
        <el-button type="primary" @click="add"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改弹窗 -->
  <el-dialog v-model="show_edit" width="40%">
    <el-form :model="form" label-width="130px" style="padding-right: 30px">
      <el-form-item label="栏目名称">
        <el-input v-model="form.categoryName"></el-input>
      </el-form-item>
      <el-form-item label="栏目描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_edit = false">取消</el-button>
        <el-button type="primary" @click="edit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="dictManage">
import { onMounted, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getAllColService, editColService, addColService, delColService } from "@/api/backoffice/column";

//控制元素
const show_edit = ref(false);

//基础数据类型
const colList = ref([
  {
    categoryId: "",
    categoryName: "",
    description: ""
  }
]);

const col = ref({
  categoryId: "",
  categoryName: "",
  description: ""
});

const form = ref({
  categoryId: col.value,
  categoryName: "",
  description: ""
});

const clear = () => {
  form.value = {
    categoryId: col.value,
    categoryName: "",
    description: ""
  };
};

//相关操作接口
const getList = async () => {
  let result = await getAllColService();
  colList.value = result.data;
};

//加载自动调用
getList();
onMounted(getList);

//add
const show_add = ref(false);
const add = async () => {
  let DataObj = {
    categoryName: form.value.categoryName,
    description: form.value.description
  };
  await addColService(DataObj);
  ElMessage.success("操作成功");
  clear();
  show_add.value = false;
};

//edit
const show = row => {
  show_edit.value = true;
  form.value = row;
};
const edit = async () => {
  let Data = {
    categoryName: form.value.categoryName,
    description: form.value.description
  };
  await editColService(Data);
  ElMessage.success("操作成功");
  clear();
  show_edit.value = false;
};

//del
const del = async categoryId => {
  await delColService(categoryId);
  ElMessage.success("操作成功");
};
</script>
